<template>
  <MsTable
    v-model:page="page"
    v-model:page-size="size"
    :total="total"
    :loading="loading"
    :columns="columns"
    :data-source="dataSource"
    @reload="handleGetTable"
  >
    <template #search>
      <a-form layout="inline" :model="searchForm">
        <a-form-item>
          <a-input v-model:value="searchForm.blurry" placeholder="输入名称或者描述搜索" />
        </a-form-item>
        <a-form-item class="search-btn">
          <a-button @click="handleResetTable">重置</a-button>
          <a-button type="primary" :loading="loading" @click="handleSearchTable">查询</a-button>
        </a-form-item>
      </a-form>
    </template>
    <template v-slot:enabled="{ record }">
      <a-switch :checked="record.enabled" @change="(change: boolean) => handleChangeUser(change, record)" checked-children="开" un-checked-children="关" />
    </template>
    <template #tools>
      <a-button type="primary" @click="handleSearchTable">新增</a-button>
    </template>
  </MsTable>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { createColumn } from '@/components/base/Table/type'
import useTable from '@/components/base/Table/useTable'

export default defineComponent({
  name: 'User',
  setup () {
    const columns = [
      createColumn('username', '用户名'),
      createColumn('nickName', '昵称'),
      createColumn('gender', '性别'),
      createColumn('phone', '电话'),
      createColumn('email', '邮箱'),
      createColumn(['dept', 'name'], '部门'),
      createColumn('enabled', '状态', true),
      createColumn('createTime', '创建日期')
    ]

    const table = useTable<{ name: string, dataScope: string }, { blurry: string }>('/api/users')

    function handleChangeUser (changeValue: boolean, record: any) {
      table.handleEditData(record.id, { ...record, enabled: changeValue })
    }

    return {
      handleChangeUser,
      columns,
      ...table
    }
  }
})
</script>
